  <link rel="import" href="../components/core-ajax/core-ajax.html">
  <link rel="import" href="../components/core-icons/core-icons.html">
  <link rel="import" href="../components/core-item/core-item.html">
  <link rel="import" href="../components/core-menu/core-menu.html">

  <polymer-element name="challenge-list" attributes="challenge_id new_challenge">
    <template>
      <style>
        core-item {
          opacity:0.6;
        }
        core-item:hover {
          opacity:1;
        }
        core-item.core-selected {
          color:red;
        }
      </style>
      <core-ajax
          auto
          url="http://bright-petal-676.appspot.com/challenges"
          handleAs="json"
          response="{{response}}"></core-ajax>
      <core-menu selectedItem="{{selectedItem}}" on-core-select="{{onSelectChallenge}}">
	<core-item id="new_challenge_item" label="New Challenge"></core-item>
        <template repeat="{{item in response}}">
          <core-item label="{{item.Title}}">
<!--             <a href="do_challenge.html?id={{item.Id}}"></a>
 -->
          </core-item>
        </template>
      </core-menu>
    </template>
    <script>
      Polymer({
        ready: function() {
          this.challenge_id = "";
        },
        onSelectChallenge: function(e, detail) {
          if (detail.isSelected == true) {
            if (detail.item == this.$.new_challenge_item) {
              this.new_challenge = true;
            } else {
              console.log(detail.item.templateInstance.model.item.Id);
              this.challenge_id = detail.item.templateInstance.model.item.Id;
            }
          }
        },
      });
    </script>
  </polymer-element>
